<template>
    <view class="container">
        <view class="list" v-for="(item,index) in list" :key="index">
            <view class="liveLogItemTop flex flex-bt flex-align">
                <view class="liveLogItemLeft">
                    <view class="liveLogItemLeftTitle">充值金额</view>
                    <view class="price flex flex-align">
                        <view class="liveLogItemLeftPrice"><span>¥</span> {{ item.price }}</view>
                        <view class="status" :class="['','bg-blue','bg-red','bg-greay'][item.payment_status]">{{['', '充值成功', '','已退款'][item.payment_status]}}</view>
                    </view>
                </view>
                <view class="liveLogRight blue-linear"> {{['','支付宝支付','微信支付','银联支付'][item.pay_type]}} </view>
            </view>
            <view class="liveLogItemRight">
                <view class="liveLogItemRightInfo flex flex-bt flex-align">
                    <view class="liveLogItemRightInfoName">订单号</view>
                    <view class="liveLogItemRightInfoID">{{ item.order_no }}</view>
                </view>
                <view class="liveLogItemRightInfo flex flex-bt flex-align">
                    <view class="liveLogItemRightInfoName">充值时间</view>
                    <view class="liveLogItemRightInfoID">{{ item.payment_time }}</view>
                </view>
                <view v-if="item.payment_status === 3" class="liveLogItemRightInfo flex flex-bt flex-align">
                    <view class="liveLogItemRightInfoName">退款金额</view>
                    <view class="liveLogItemRightInfoID">{{ item.refund_price }}</view>
                </view>
                <view v-if="item.payment_status === 3" class="liveLogItemRightInfo flex flex-bt flex-align">
                    <view class="liveLogItemRightInfoName">退款原因</view>
                    <view class="liveLogItemRightInfoID">{{ item.apply_reason||'无' }}</view>
                </view>
                <view v-if="item.payment_status === 3" class="liveLogItemRightInfo flex flex-bt flex-align">
                    <view class="liveLogItemRightInfoName">申请时间</view>
                    <view class="liveLogItemRightInfoID">{{ item.apply_time }}</view>
                </view>
                <view v-if="item.payment_status === 3" class="liveLogItemRightInfo flex flex-bt flex-align">
                    <view class="liveLogItemRightInfoName">退款时间</view>
                    <view class="liveLogItemRightInfoID">{{ item.refund_time }}</view>
                </view>
            </view>
        </view>
    </view>
</template>
<script setup lang="ts">
import { ref } from 'vue'
import { useInfiniteLoad } from '@/hooks/useInfiniteScroll';
import API_CENTER from '@/api/teamcenter';
import { onLoad, onReachBottom } from '@dcloudio/uni-app';
onLoad(() => {
    loadMore()
})
const { list, isLoading, hasMore, loadMore } = useInfiniteLoad(API_CENTER.getRechargeList, {
    initialParams: {},
    transformResponse: (response) => {
        return response.list || [];
    }
});
onReachBottom(() => {
    // 还有更多数据且不在加载中时，加载更多
    if (hasMore.value && !isLoading.value) {
        loadMore()
    }
})
</script>
<style scoped lang="scss">
    .container {
        padding: 30rpx;
        .list {
            background: #fff;
            padding: 20rpx;
            border-radius: 20rpx;
            margin-bottom: 20rpx;
            .liveLogItemTop {
                .liveLogItemLeftTitle {
                    font-size: 26rpx;
                    color: #333;
                }
                .liveLogItemLeftPrice {
                    font-size: 32rpx;
                    color: #3C7CFF;font-weight: bold;
                    span{font-size: 24rpx;}
                }
                .status{padding: 5rpx 20rpx;border-radius: 30rpx;font-size: 20rpx;margin-left: 20rpx;}
            }
            .liveLogRight{color: #fff;font-size: 20rpx;padding: 10rpx 20rpx;border-radius:  30rpx 0 0 30rpx;margin-right: -20rpx;}
            .liveLogItemRight {
                background: #F5F6FA;padding:10rpx 30rpx;margin-top: 20rpx;border-radius: 20rpx;
            }
            .liveLogItemRightInfo {
                font-size: 24rpx;height: 60rpx;
                .liveLogItemRightInfoName{color: #313131;font-weight: bold;}
                .liveLogItemRightInfoID{color: #646566;}
            }
        }
    }
</style>
